<template>
  <div>
    <h1>【aty-switch】 component demo</h1>
    <p>【aty-switch】 本质</p>
    <aty-row class="fd-switch-box">
      <!--基础-->
      <aty-row>
        <aty-title level="4">1.【aty-switch】 基础</aty-title>
        <aty-switch name="test" />
        <aty-switch name="test2" />
      </aty-row>

      <!--双向绑定-->
      <aty-row>
        <aty-title level="4">2.【aty-switch】 双向绑定</aty-title>
        <aty-row>
          <aty-col span="4">
            <aty-switch name="test" v-model="switchValue1" />
            switchValue1： {{switchValue1}}
          </aty-col>
          <aty-col span="8">
            <aty-switch name="test2" v-model="switchValue2" />
            switchValue2： {{switchValue2}}
          </aty-col>
        </aty-row>
      </aty-row>

      <!--禁用-->
      <aty-row>
        <aty-title level="4">3.【aty-switch】 禁用</aty-title>
        <aty-switch disabled />
      </aty-row>

      <!--自定义label-->
      <aty-row>
        <aty-title level="4">4.【aty-switch】 自定义label</aty-title>
        <aty-switch labelOn="on" labelOff="off" />
      </aty-row>

      <!--自定义label-->
      <aty-row>
        <aty-title level="4">5.【aty-switch】 事件 @change</aty-title>
        <aty-switch name="changeTest" labelOn="on" labelOff="off" @change="change" />
      </aty-row>
      <aty-row>
        <aty-title level="4">5.【aty-switch】  label</aty-title>
        <aty-switch name="changeTest" label="人生重启" labelOn="on" labelOff="off" v-model="switchValue1" />
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      switchValue1: true,
      switchValue2: true,
      switchValue3: false
    };
  },
  methods: {
    change(value, name) {
      console.log(value, name);
    }
  }
};
</script>
<style>
.fd-switch-box {
  margin: 20px;
  text-align: left;
}
</style>
